function TyphoonTimeLine(typhoonlist,svgId){
	var div = $('#'+svgId);
	var height = div.height();
	var width = div.width();
	var xPieceNum = 0;
	var yPieceNum = 5;
	var fontSize = 12;
	var fontHeight = 16;
	var timeHeight = 16;
	var monthTyphoonsMap = undefined;
	var snap = Snap("#"+svgId);
	var labelIndexMap = new Map();
	var svgData = {
			//{name,id,warnLevel,xPiece,heightPiece,lengthPiece}
			typhoons:[],
			//{xPiece,heightPiece}
			scales:[],
			//[month:,xPiece,heightPiece]
			months:[]
	};
	
	
	this.setFontSize = function(num){
		fontSize = num;
	};
	this.show = function(){
		div.html('');
		show();
	};
	function show(){
		classifyData();
		initSvgData();
		drawSvg();
	}
	function classifyData(){
		//{9:[{tname:a,position:3},],10:}
		monthTyphoonsMap = new Map();
		xPieceNum = 0;
		var endMonth = 0;
		for(var i=0;i<typhoonlist.length;i++){
			var t = typhoonlist[i];
			var start = new Date(t.startTime.time);
			var month = start.getMonth()+1;
			var monthDayNum = getDaysInOneMonth(start.getFullYear(),month);
			t.positionPercent = start.getDate()/monthDayNum;
			t.lastPercent = t.lastHours/24/monthDayNum;
			var typhoons = monthTyphoonsMap.get(month);
			if(!typhoons){
				typhoons = [];
				monthTyphoonsMap.put(month,typhoons);
			}
			typhoons.push(t);
			xPieceNum ++;
			var endMonth0 = new Date(t.endTime.time).getMonth()+1;
			if(endMonth0>endMonth){
				endMonth = endMonth0;
			}
		}
		var tys = monthTyphoonsMap.get(endMonth);
		if(!tys && endMonth != 0){
			monthTyphoonsMap.put(endMonth,[{}]);
			xPieceNum ++;
		}
	}
	function initSvgData(){
		var currentPiece = 0;
		var count = 0;
		monthTyphoonsMap.each(function(index,key,value){
			var monthPiece = value.length;
			for(var i in value){
				value[i].xPiece = currentPiece + monthPiece * value[i].positionPercent;
				value[i].yPiece = Number(count)%(yPieceNum-1);
				value[i].lengthPiece = monthPiece * value[i].lastPercent;
				svgData.typhoons.push(value[i]);
				count ++;
			}
			svgData.months.push({month:key,yPiece:yPieceNum,xPiece:currentPiece+monthPiece/2});
			currentPiece += monthPiece;
			svgData.scales.push({yPiece:yPieceNum,xPiece:currentPiece});
		});
	}
	function drawSvg(){
		var formatter = new Formatter();
		labelIndexMap.clear();
		for(var i in svgData.typhoons){
			var sdata = svgData.typhoons[i];
			var f = formatter.getFomatter(sdata);
			var label = getLabel(sdata);
			labelIndexMap.put(label,i);
			var text = snap.paper.text(f.x, f.y+fontSize, label).attr({
						fill:'white',
						fontSize:fontSize+'px',
						"font-family":"宋体",
						cursor:'pointer'
					});
			var bbox = text.getBBox();
			var length = f.width;
			if(bbox.width>length){
				length = bbox.width;
			}
			if(length+f.x>width){
				f.x = width-length;
			}
			text.remove();
			snap.paper.image(f.img, f.x, f.y, length, fontHeight);
			snap.paper.text(f.x+(length-bbox.width)/2, f.y+fontSize, getLabel(sdata)).attr({
				fill:'white',
				fontSize:fontSize+'px',
				"font-family":"宋体",
				cursor:'pointer',
				onclick:'typhoonDiscMan.drawTyphoon("'+i+'");'
			});
		}
		for(var j in svgData.months){
			var sdata = svgData.months[j];
			var f = formatter.getFomatter(sdata);
			snap.paper.text(f.x-fontSize, f.y+fontSize, sdata['month']+'月').attr({
				fill:'white',
				fontSize:fontSize+'px'
			});
		}
		for(var z in svgData.scales){
			var sdata = svgData.scales[z];
			var f = formatter.getFomatter(sdata);
			snap.paper.rect(f.x, f.y, 3, timeHeight/2, 0).attr({
				fill:'white'
			});
		}
	}
	function getLabel(typhoon){
		var id = typhoon['tid']%100;
		return id+'号'+typhoon['tname'];
	}
	function Formatter(){
		var YPlusPiece = 0;
		var YPieceLength = (height - timeHeight)/(yPieceNum - 1);
		var XPieceLength = width/xPieceNum;
		var widthMax = {};
		this.getFomatter = function(obj){
			if(obj.yPiece == yPieceNum){
				return {x:obj.xPiece*XPieceLength,y:height-timeHeight};
			}else{
				var x = obj.xPiece * XPieceLength;
				var y = ((obj.yPiece + YPlusPiece)%(yPieceNum-1)) * YPieceLength;
				for(var i=0;i<yPieceNum-1;i++){
					if(!widthMax[y] || widthMax[y]>x){
						break;
					}
					YPlusPiece ++;
					x = obj.xPiece * XPieceLength;
					y = ((obj.yPiece + YPlusPiece)%(yPieceNum-1)) * YPieceLength;
				}
				var length = obj.lengthPiece * XPieceLength;
				widthMax[y] = y + length;
				return {x:x,y:y,width:length,height:fontSize,img:getImg(obj.warnLevel)};
			}
		};
	}
	function getImg(num){
		num = num?num:0;
		switch (num){
		case 3: return '/resources/img/typhoon/h-6.png';
		case 2: return '/resources/img/typhoon/h-5.png';
		case 1: return '/resources/img/typhoon/h-4.png';
		case 0: return '/resources/img/typhoon/h--1.png';
		default:if(num>3){
					return '/resources/img/typhoon/h-6.png';
				}else{
					return '/resources/img/typhoon/h--1.png';
				}
		}
	}
	function getDaysInOneMonth(year, month){  
		month = parseInt(month, 10);  
		var d= new Date(year, month, 0);  
		return d.getDate();  
	}  
	
}